<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>innerHTML</title>
</head>
<body>
    <input id="addBtn" type="button" value="添加元素">
    <div id="d1">
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
        <p>段落5</p>
    </div>
    <script>
        let addBtn = document.getElementById("addBtn");
        addBtn.onclick = function(){
            let d1 = document.getElementById("d1");
            // innerHTML：可以获取指定标签里面的所有内容，并以字符串的形式返回
            // 通过innerHTML来设置的时候，它会替换原来标签里面的所有内容
            // console.log(d1.innerHTML);
            // d1.innerHTML += "<p>新增元素</p>";
            // d1.innerHTML = "<p>新增元素</p>" + d1.innerHTML;
            
            // innerText：获取或插入的文本不会被浏览器解析
            console.log(d1.innerText);
            d1.innerText = "<p>新增元素</p>";
        }
    </script>
</body>
</html>